<template>
  <div class="container">
    <el-row class="topTitle boxBorder">
      <el-row class="topBox">
        <div>
          <el-select
            v-model="projectId"
            @change="changeProject"
            filterable
            placeholder="暂无关联项目"
          >
            <el-option
              v-for="(item, index) of projects"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </div>
      </el-row>
    </el-row>
    <div class="mainCon">
      <el-row>
        <el-col :span="18" :offset="3">
          <el-steps :active="3" direction="vertical" align-center>
            <el-step title="核定缴存金额">
              <div slot="description">
                <p>
                  施工总承包单位（包括直接承包建设单位发包工程的专业承包企业）应在工程建设项目开工前，
                  向项目所在地人社部门提交缴存申请书并核定缴存工资保证金数额
                </p>
                <ul>
                  <li>应提交资料清单如下：</li>
                  <li>
                    1.保证金申请表(4份)
                    <el-link @click="downLoad('depositFiles')">下载</el-link>
                  </li>
                  <li>2.施工合同书及中标通知书复印件</li>
                  <li>
                    3.项目欠薪委托支付承诺书
                    <el-link @click="downLoad('projectPayFiles')">下载</el-link>
                  </li>
                  <li>4.施工合同书及被委托人身份证复印件</li>
                </ul>
                <p class="tipPhone">如有疑问，可加QQ群：645410978</p>
              </div>
            </el-step>
            <el-step title="缴存保证金">
              <p slot="description">
                施工总承包单位按规定缴存工资保证金时，可以选择现金形式缴存，也可合法选择以银行保函、保证保险及工程担保公司保函等第三方担保方式中的一种或多种代替缴存
              </p>
            </el-step>
            <el-step title="已缴存，进行备案">
              <div slot="description">
                <p>
                  施工总承包单位缴存保证金后，将缴纳凭证上传至人社部门劳动监察机构形式审核后，视为依法缴存农民工工资保证金
                </p>
                <el-button @click="toCashDeposit">申报保证金备案</el-button>
              </div>
            </el-step>
          </el-steps>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cashDepositExplainHS',
  data() {
    return {
      projects: [],
      projectId: '',
      userType: '', //用户类型
      role: '',
      cutRuleFile: [],
    }
  },
  created() {
    this.userType = localStorage.getItem('loginType')
    if (this.userType === 'JC') {
      this.$store.commit(
        'set_active_index',
        '/home/cashDeposit/cashDepositListJC'
      )
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/cashDeposit/cashDepositListJC',
        newUrl: this.$router.currentRoute.fullPath,
      })
    } else {
      this.$store.commit(
        'set_active_index',
        '/home/cashDeposit/cashDepositList'
      )
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/cashDeposit/cashDepositList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    }
    this.getProjects()
    this.getRole()
    this.getCutRuleFile()
  },
  methods: {
    changeProject() {
      this.isHsFirstLogin(newValue)
      localStorage.removeItem('isFirstUseCashDeposit')
    },
    isHsFirstLogin(projectId) {
      this.axios
        .post('api-p/deposit/expand/checkDepositArchives', { projectId })
        .then((res) => {
          console.log(res)
          if (!res.data.hasError) {
            if (res.data.result) {
              this.$router.push({
                path: '/home/cashDeposit/cashDepositExplainHS',
              })
            } else {
              this.$router.push({
                path: '/home/cashDeposit/cashDepositExplainHS',
              })
            }
          }
        })
    },
    getProjects() {
      this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/current/projects',
        data: {
          sysAppCode: localStorage.getItem('judgeRoleCode'),
        },
      }).then((resp) => {
        if (!resp.data.hasError) {
          this.projects = resp.data.result
          if (this.projects.length) {
            this.projectId = resp.data.result[0].code
          }
        }
      })
    },
    //区分企业和监察的引导页
    toCashDeposit() {
      if (this.userType === 'JC') {
        localStorage.setItem('isFirstUseCashDepositJC', true)
        this.$router.push('/home/cashDeposit/cashDepositListJC')
        return
      } else {
        localStorage.setItem('isFirstUseCashDeposit', true)
        this.$router.push('/home/cashDeposit/cashDepositList')
        return
      }
    },
    //下载操作手册
    downLoad(value) {
      this.downLoadFile(value)
    },
    downLoadFile(type) {
      this.axios({
        method: 'post',
        url: 'api-p/deposit/expand/findurl',
        data: {
          type: type,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              window.open(response.data.result.url)
            } else {
              this.$message({
                type: 'error',
                message: response.data.msg,
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //获取减免配置规则
    getRole() {
      this.axios
        .post('api-d/depositpayconfig/expand/ruleTip', {
          areaId: this.$store.state.projectAreaId,
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.role = res.data.result.tip
          }
        })
    },
    //获取减免配置附件
    getCutRuleFile() {
      this.axios
        .post('api-d/depositpayconfig/expand/findFile', {
          areaId: this.$store.state.projectAreaId,
        })
        .then((res) => {
          if (!res.data.hasError) {
            this.cutRuleFile = res.data.result
          }
        })
    },
  },
}
</script>

<style scoped lang="less">
.topTitle {
  background: #fff;
  border-radius: 4px 4px 0 0;
  padding: 16px 24px 16px 10px;
  .topBox {
    /deep/.el-input__inner {
      font: bold 24px Microsoft YaHei;
      color: #333333;
      border: none;
      height: 30px;
      // background: #e4ebf1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /deep/.el-select__caret {
      color: #333;
      font-size: 20px;
      line-height: 30px;
    }
  }
}
.el-steps {
  background: #fff;
  // padding: 40px 0;
  padding-top: 10px;
  margin: 0 24px;
  padding-bottom: 48px;
}
/* 步骤条 */
/deep/ .el-step__head {
  color: #fff;
  .el-step__icon.is-text {
    border: 2px solid #009588;
    background: #009588;
  }
}

/deep/ .el-step__head,
/deep/ .el-step__title.is-finish {
  color: #333;
  font-weight: bold;
}

/deep/ .el-step__head .el-step__icon.is-text {
  border-color: #265faa;
  background-color: #265faa;
  color: #fff;
}

/deep/ .el-step__line {
  border-color: #eee;
  width: 0px !important;
}

/deep/ .el-step__title.is-process {
  color: #009588;
}
/deep/.el-step__description {
  font-size: 14px;
  line-height: 22px;
  color: #333;
  padding-bottom: 40px;
  padding-right: 0 !important;
  ul {
    background-color: #f6f8fc;
    padding: 12px 16px;
    line-height: 24px;
    margin: 8px 0;
  }
  .tipPhone {
    color: #999;
  }
  .el-button {
    margin-top: 40px;
    background-color: #3189ea;
    color: #fff;
    height: 36px;
    line-height: 36px;
    padding: 0 16px !important;
    outline: none;
    border: none;
    &:hover {
      opacity: 0.8;
    }
  }
}
/deep/.el-step__description.is-finish {
  color: #333 !important;
}
</style>
